import React from 'react'
import "./citylist.scss"
import { Icon, IndexBar, Cell } from 'react-vant';
import citys from "./data.json";
function CityList(props) {

  const indexList = ['A', 'B', 'C', 'D', 'E', 'F', 'H', 'J', 'K', 'L', 'M', 'N', 'Q', 'S', 'T', 'W', 'X', 'Y', 'Z'];
  return (
    <div className="citylist">
      <div className="top">
        {/* 返回的一个按钮 */}
        <Icon name="arrow-left" onClick={() => {
          props.history.go(-1);
        }} />
        <span>城市选择</span>
      </div>
      <div className="content">
        <IndexBar indexList={indexList} sticky={false}>
          {
            indexList.length && indexList.map((v) => {
              return <>
                {
                  citys.city.map((items, ind) => {
                    if (items.title === v && items.title.length) {
                      return <>
                        <IndexBar.Anchor index={items.title} key={ind * -1} >{items.title} </IndexBar.Anchor>
                        {
                          items.lists.map((item, inds) => {
                            return <Cell title={item} key={inds * -2}


                            />
                          })
                        }
                      </>
                    }
                  })
                }
              </>
            })
          }

        </IndexBar>
      </div>
    </div>
  )

}

export default CityList